<template>
  <div class="department">
    <a-card class="general-card">
      <FormHeader v-if="showSearchBar" :collection="collection" @tap-date="tapDate"></FormHeader>
      <!--      <formButtonGroup-->
      <!--        v-model:columns="columns"-->
      <!--        v-model:size="size"-->
      <!--        :config="config"-->
      <!--        :search-bar="searchBar"-->
      <!--        @refresh="init"-->
      <!--        @change-search-bar="changeSearchBar"-->
      <!--      />-->
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data="data"
        :bordered="false"
        :size="size"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #enable>
          <a-tag>是</a-tag>
        </template>
        <template #option="{ record }">
          <a-space>
            <a-button @click="edit(record.id)">修改</a-button>
            <a-button @click="add(record.id)">新增</a-button>
            <a-button v-if="record.father == '111'" @click="del(record.id)">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:visible="editVisible" title="编辑" title-align="start" @ok="handleOk" @cancel="handleCancel">
      <EditForm :gathering="collection"></EditForm>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './deviceTypeSetting.ts';
import FormHeader from '@com/formHeader/formHeader.vue';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import EditForm from '@com/editForm/editForm.vue';

export default {
  name: 'DeviceTypeSetting',
  components: {
    FormHeader,
    formButtonGroup,
    EditForm,
  },
  setup() {
    const { base, collection, data, tapDate, edit, add, del, changeSearchBar } = importConfig();
    return {
      ...toRefs(base),
      collection,
      data,
      tapDate,
      edit,
      add,
      del,
      changeSearchBar,
    };
  },
};
</script>

<style scoped lang="less"></style>
